<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工详情</title>
    <script type="text/javascript" src="resources/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery.param.js"></script>
    <style type="text/css">
        <!-- 清除样式 -->
        body{font:13px/26px "微软雅黑";}
		.main{width:720px;background:#F1F1F1;margin:20px auto;padding:10px;}
        .main_list h2{font-size:18px;font-weight:bold;}
		.main_list label{font-size:14px;}
		.main_list ul {width:720px;list-style-type:none;list-style-position:outside;padding:0px;}
		.main_list li{padding:12px; border-bottom:1px solid #DFDFDF;position:relative;} 
		.main_list li:first-child, .main_list li:last-child {border-bottom:1px solid #777;}
		.main_list h2 {margin:0;display: inline;}
		.main_list label {width:150px;margin-top: 3px;display:inline-block;float:left;padding:3px;}
		.main_list input[type=text] {height:20px; width:220px; padding:5px 8px;}
		.main_list button {margin-left:156px;}
		.main_list button.add {margin-left:55px;}
		.main_list button.back {margin-left:55px;}
		.main_list input[type=text] {
			border:1px solid #aaa;
			box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
			border-radius:2px;
			padding-right:30px;
			-moz-transition: padding .25s; 
			-webkit-transition: padding .25s; 
			-o-transition: padding .25s;
			transition: padding .25s;
		}

    </style>
</head>
<body>
<div class="main">
	<div class="main_list">
		<ul>
			<li>
				<h2>员工详情</h2>
			</li>
			<li>
				<label>员工姓名:</label>
				<input id="ename" type="text" readonly="readonly"/>
			</li>
			<li>
				<label>性别:</label>
				<input type="radio" value="0" disabled="true" /> 男
				<input type="radio" value="1" disabled="true" /> 女
			</li>
			<li>
				<label>出生日期:</label>
				<input id="birthday" type="text" readonly="readonly" />
			</li>
			<li>
				<label>入职日期:</label>
				<input id="joinDate" type="text" readonly="readonly" />
			</li>
			<li>
				<label>员工编号:</label>
				<input id="eno" type="text" readonly="readonly" />
			</li>
			<li>
				<button class="edit" type="submit">修改</button>
				<button id="add" type="submit">新增</button>
				<button class="back" type="button" onclick="javascript:history.back(-1)">返回</button>
			</li>
		</ul>
	</div>
</div>
</body>
<script>
    $(function(){
		var e_employeeVO = {};
        var id = $.query.get("id");
		var urlStr = "http://127.0.0.1:8080/employee_ssh/get.do?id=" + id;
		$.ajax({
			type: "GET",
			contentType: "application/x-www-form-urlencoded",
			url: urlStr,
			xhrFields:{withCredentials:true},
			success:function(data) {
				if(data.msg == "ok") {
					e_employeeVO = data.data;
					reloadDom();
				} else {
					alert("获取员工信息失败");
				}
			},
			error:function(data) {
				alert("失败，原因为" + data.responseText);
			}
		});

		function reloadDom() {
			$("#ename").val(e_employeeVO.ename);
			$("#sex").val(e_employeeVO.sexStr);
			$(":radio").each(function() {
				if ($(this).val() == e_employeeVO.sex) {
					$(this).attr("checked", "checked");
				}
			});
			$("#birthday").val(e_employeeVO.birthday);
			$("#joinDate").val(e_employeeVO.joinDate);
			$("#eno").val(e_employeeVO.eno);
		}

		$(".edit").on("click", function() {
			window.location.href = "editEmployee.html?id=" + e_employeeVO.id;
		});

		$("#add").on("click", function(){
			window.location.href = "addEmployee.html";
		});
    });

	function show(index){
		var dd = $("type").getElementsByTagName("dd");
		for(var i=0;i<dd.length;i++){
			if(i==index){
				dd[i].className="selected";
			}
			else{
				dd[i].className=null;
			}
		}
	}
</script>
</html>